﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Timeline.ascx.cs" Inherits="Event.Controls.Homepage.Timeline" %>
<div class="chart-wrapper">
    <div class="chart">
        <label class="chart-index main-point">
        </label>
    </div>
</div>
<script type="text/javascript">
    var timeline = function ($) {
        function eventInfo(date, content, url) {
            this.isOccurred = false;
            this.date = date;
            this.content = content;
            this.url = (url ? url : "" );
        }

        var _startDate = new Date();
        var _endDate = new Date();
        var _now = new Date();
        var arr = [];
        var arrStatic = [];
        var chart = $('.chart');
        var dot = $('.chart-index.main-point');

        function registerEvent(date, func) {
            arr.push(new eventInfo(date, func));
        }

        function changePos(startDate, endDate) {
            var startPosX = -dot.width() / 2;
            var startPosY = -dot.height() / 2;

            var pos = calculatePos(startDate, endDate);
            var x = pos.x;
            var y = pos.y;
            dot.css({ 'top': y + startPosY + 'px', 'left': x + startPosX + 'px' }).show();

            for (var i = 0; arr[i]; i++) {
                if (arr[i].date < _now && (!arr[i + 1] || (arr[i + 1] && arr[i + 1].date > _now))) {
                    if (typeof arr[i].content == "function" && !arr[i].isOccurred) {
                        arr[i].content();
                        arr[i].isOccurred = true;
                    }
                }
            }
        }

        function calculatePos(startDate, endDate) {
//            var s =Math.max(endDate - startDate,startDate-endDate) ;
//            var s2 = Math.max(_now - startDate, startDate - _now);
            var h = 400;
            var s = endDate - _startDate;
            var s2 =startDate - _startDate ;
            
            
            var y;
            if (s == 0) {

                y = h;


            } else {
                if (s2 == 0) {
                    y = 0;
                }else{
                var v =  h / s ;
                y = Math.min(h, v * s2);
                    }
            }
            var x = y * 3 / 10;
            return { x: x, y: y };
        }

        function createEventContent(content, offset, index) {
            var elmt = $('<p id="event-content-' + index + '"><span class="arrow-left"></span>' + content + '</p>');
            elmt.css({
                'position': 'absolute',
                'background-color': "#ccc",
                'color': '#333',
                'display': 'block',
                'padding': '0 10px',
                'top': offset.top + 'px',
                'left': offset.left + 'px'
            });

            $('body').append(elmt);
            return elmt;
        }

        function registerContent(date, content) {
            arr.push(new eventInfo(date, function () {
                createEventContent(content, { top: dot.offset().top - 5, left: dot.offset().left + 15 }, -1);
                $("#event-content--1").show();
            }));
        }

        function registerStaticPoint(date, content, url) {
            arrStatic.push(new eventInfo(date, content, url));
        }

        function markStaticPoints() {

            for (var i = 0; arrStatic[i]; i++) {
                var date = arrStatic[i].date;
                var content = arrStatic[i].content;
                var link = "";
                if (arrStatic[i].url != "") {
                    link = 'href=\"'+ arrStatic[i].url +'\"';
                }
                var activeClass = (date <= _now ? "" :  "notoccurred");
                var pos = calculatePos(date, _endDate);
                chart.append('<a id="chart-index-' + i + '" '+ link +' onmouseout="(function() {$(\'#event-content-' + i + '\').hide();})();" onmouseover="(function() {$(\'#event-content-' + i + '\').show();})();" class="chart-index '+activeClass+'"></a>');
                var elmt = $('#chart-index-' + i);
                elmt.css({ 'top': pos.y - parseInt(elmt.width() / 2) + 'px', 'left': pos.x - parseInt(elmt.width() / 2) + 'px' }).show();
                createEventContent(content, { top: elmt.offset().top - 8, left: elmt.offset().left + 10 }, i);
                var elmtContent = $('#event-content-' + i);
                elmtContent.hide();
            }
        }

        return {
            init: function (startDate, endDate, now) {
                _startDate = startDate;
                _endDate = endDate;
                _now = now;

                markStaticPoints();
                changePos(now, endDate);

            },
            registerContent: function (date, content) {
                return registerContent(date, content);
            },

            registerEvent: function (date, func) {
                return registerEvent(date, func);
            },
            registerStaticPoint: function (date, content, url) {
                return registerStaticPoint(date, content, url);
            }
        };

    } (jQuery);

    
    timeline.registerStaticPoint(new Date(2013, 7, 2, 0, 0, 0, 0), '2/8: Bắt đầu cuộc thi');
    timeline.registerStaticPoint(new Date(2013, 7, 12, 0, 0, 0, 0), '12/8: Bắt đầu bình chọn Vòng 1','/the-le-giai-thuong.htm#v1');
    timeline.registerStaticPoint(new Date(2013, 7, 17, 0, 0, 0, 0), '17/8: Bắt đầu sản xuất bộ ảnh Vòng 2','/the-le-giai-thuong.htm#v2');
    timeline.registerStaticPoint(new Date(2013, 7, 22, 0, 0, 0, 0), '22/8: Bắt đầu bình chọn Vòng 2','/the-le-giai-thuong.htm#v2');
    timeline.registerStaticPoint(new Date(2013, 7, 27, 0, 0, 0, 0), '27/8: Bắt đầu sản xuất bộ ảnh Vòng 3','/the-le-giai-thuong.htm#v3');
    timeline.registerStaticPoint(new Date(2013, 7, 31, 0, 0, 0, 0), '31/8: Bắt đầu bình chọn Vòng 3','/the-le-giai-thuong.htm#v3');
    timeline.registerStaticPoint(new Date(2013, 8, 3, 0, 0, 0, 0), '3/9: Công bố kết quả cuộc thi');
   
    
    timeline.init(
        new Date(2013, 7, 2, 0, 0, 0, 0),
        new Date(2013, 8, 3, 0, 0, 0, 0),
        new Date(<%=DateTime.Now.Year %>, <%=DateTime.Now.Month-1 %>, <%=DateTime.Now.Day %>, <%=DateTime.Now.Hour %>, <%=DateTime.Now.Minute %>, <%=DateTime.Now.Second %>, <%=DateTime.Now.Millisecond %>));
</script>
